import React, { useState } from "react";
import "./Login.less";
import logo from "../../assets/logo.png";
import head from "../../assets/head.png";
import { Form, Input, Button, Checkbox, message } from "antd";
import { useNavigate } from "react-router-dom";
import http from "../../utils/http";
import store from "../../store/store";
export default function Login() {
  const navtion = useNavigate();
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [auth, setAuth] = useState("");
  const [phone, setPhone] = useState("");
  const [img, setImg] = useState("");

  // 发送验证码
  const sendAuth = () => {
    console.log(phone);
    http({
      url: "apa/sms/send",
      method: "post",
      params: { phone },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        message.success("验证码为：" + res.smsCode);
      } else {
        message.error(res.msg);
      }
    });
  };

  const onFinish = (values) => {
    console.log(values);
    // sessionStorage.setItem("token",JSON.stringify(1));
    // store.setUser(1);
    // navtion("/home");
    http({
      url: "apa/adminUser/login",
      method: "post",
      params: { username:user, password:pass, code:auth, phone },
    })
      .then((res) => {
        console.log(res);
        if (res.code == "200") {
          console.log(res);
          sessionStorage.setItem("token",JSON.stringify(res.token));
          store.setToken(res.token);
          message.success(res.msg);
       

               //获取登录用户信息
            http({
              url: "apa/adminUser/validateLoginStatus",
              method: "post",
              params:{token:res.token}
            }).then((res1)=>{
              console.log(res1);
              store.setUser(res1);
              sessionStorage.setItem("user", JSON.stringify(res1));
            })
            navtion("/home");

        } else {
          message.error(res.msg);
        }
      })
      .catch((err) => {
        alert(err);
      });
  };


  const getImg=()=>{
    http({
      url: "api/admin/getAdminImg",
      method: "post",
      params: { user },
    }).then((res) => {
      console.log(res);
      setImg(res.img)
    });
  }

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className="content">
      <div id="loginBox">
        <div id="headPic">
          <img src={img||logo} alt="" />
        </div>
        <div id="sj"></div>
        <div id="formBox">
          <Form
            name="basic"
            labelCol={{
              span: 5,
            }}
            wrapperCol={{
              span: 19,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入你的用户名!",
                },
              ]}
            >
              <Input
                value={user}
                onChange={(e) => {
                  setUser(e.target.value);
                }}
                onBlur={getImg}
                style={{ borderRadius: "10px" }}
              />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入你的密码!",
                },
              ]}
            >
              <Input.Password
                value={pass}
                onChange={(e) => {
                  setPass(e.target.value);
                }}
                style={{ borderRadius: "10px" }}
              />
            </Form.Item>

            <Form.Item
              label="验证码"
              name="authcode"
              rules={[
                {
                  required: true,
                  message: "请输入验证码!",
                },
              ]}
            >
              <Input
                value={auth}
                onChange={(e) => {
                  setAuth(e.target.value);
                }}
                style={{ borderRadius: "10px", width: "80px" }}
              />
            </Form.Item>

            <Form.Item
              label="手机号"
              name="phone"
              
            >
              <Input
                value={phone}
                onChange={(e) => {
                  setPhone(e.target.value);
                }}
                style={{
                  borderRadius: "10px",
                  width: "130px",
                  marginRight: "20px",
                }}
              />
              <Button type="primary" onClick={sendAuth}>
                发送验证码
              </Button>
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 4,
                span: 16,
              }}
            >
              <Checkbox>记住密码</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 5,
                span: 14,
              }}
            >
              <Button type="primary" htmlType="submit" style={{width:'100%'}}>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
